<template>
  <div class="container-p">
    <a-card class="card">
      <template #title>
        <div class="title-warp">
          <div class="title-text">个人待办</div>
          <div class="title-area">
            <div class="tab-list">
              <div
                v-for="item in tabList"
                :key="item.value"
                class="tab-item"
                :class="{
                  checked: item.checked,
                }"
                @click="handleClickTab($event, item.value)"
              >
                {{ item.label }}</div
              >
            </div>
            <div class="components-edit">
              <icon-svg class="edit-icon" icon-class="icon-luru" />
              <div class="word">编辑组件</div>
            </div>
          </div>
        </div>
      </template>
      <div class="warp">
        <a-carousel
          indicator-position="outer"
          show-arrow="never"
          :style="{
            width: '100%',
            height: '200px',
          }"
        >
          <a-carousel-item
            v-for="(x, i) in splitArray(renderData, 10)"
            :key="i"
          >
            <div class="card-list">
              <a-row :gutter="24">
                <a-col
                  v-for="(item, index) in x"
                  :key="item.id"
                  :span="4"
                  class="card-item"
                >
                  <div
                    class="left-area"
                    :style="{
                      backgroundColor:
                        colorOpt.find((item) => item.index === (index + 1) % 11)
                          ?.color || '#FFF',
                    }"
                  >
                    <icon-svg
                      class="icon"
                      icon-class="icon-a-2daiqianshousonghuodan"
                    />
                  </div>
                  <div class="right-area">
                    <div class="number">{{ item.number }}</div>
                    <div class="title">{{ item.name }}</div>
                  </div>
                </a-col>
              </a-row>
            </div>
          </a-carousel-item>
        </a-carousel>
      </div>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import { color } from 'echarts/core';
  import { ref } from 'vue';

  const renderData = ref();
  const tabList = ref([
    {
      value: '1',
      label: '仓储作业待办',
      checked: false,
    },
  ]);
  const colorOpt = [
    {
      index: 1,
      color: '#2667FF',
    },
    {
      index: 2,
      color: '#3B28CC',
    },
    {
      index: 3,
      color: '#3F8EFC',
    },
    {
      index: 4,
      color: '#87BFFF',
    },
    {
      index: 5,
      color: '#ADD7F6',
    },
    {
      index: 6,
      color: '#A5C5F9',
    },
    {
      index: 7,
      color: '#91E5F6',
    },
    {
      index: 8,
      color: '#686EFF',
    },
    {
      index: 9,
      color: '#1B4965',
    },
    {
      index: 10,
      color: '#62B6CB',
    },
  ];
  const fetchData = async () => {
    renderData.value = [
      { id: 1, name: '待确认送货申请', number: '62' },
      { id: 2, name: '待确认送货申请', number: '62' },
      { id: 3, name: '待确认送货申请', number: '62' },
      { id: 4, name: '待确认送货申请', number: '62' },
      { id: 5, name: '待确认送货申请', number: '62' },
      { id: 6, name: '待确认送货申请', number: '62' },
      { id: 7, name: '待确认送货申请', number: '62' },
      { id: 8, name: '待确认送货申请', number: '62' },
      { id: 9, name: '待确认送货申请', number: '62' },
      { id: 10, name: '待确认送货申请', number: '62' },
      { id: 11, name: '待确认送货申请', number: '62' },
      { id: 12, name: '待确认送货申请', number: '62' },
    ];
  };
  const handleClickTab = (event: UIEvent, value: string) => {
    tabList.value.forEach((item) => {
      item.checked = item.value === value;
    });
    fetchData();
  };

  function splitArray(
    arr: Array<{
      id: number;
      name: string;
      number: string;
    }>,
    index: number
  ) {
    if (index < 0 || index > arr.length) {
      throw new Error('Index out of range');
    }
    return [arr.slice(0, index), arr.slice(index)];
  }
  fetchData();
</script>

<style lang="less" scoped>
  :deep(.arco-card-header) {
    background-color: #f2f3f5;
    border: 1px solid #f2f3f5;
  }
  :deep(.arco-card-header-title) {
    font-size: 14px;
    font-weight: bold;
  }
  .card {
    border: 1px solid #f2f3f5;
  }
  .container-p {
    margin-top: 10px;
    padding: 0;
    display: block;
    .title-warp {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 40px;
      .title-text {
        position: relative;
        &::after {
          content: '';
          position: absolute;
          width: 1px;
          height: 100%;
          background-color: #ccc;
          top: 0;
          left: 150%;
        }
      }
      .title-area {
        margin-left: 30px;
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;
        .tab-list {
          display: flex;
          .tab-item {
            cursor: pointer;
            padding: 0 20px;
            color: #888888;
            font-size: 14px;
          }
          .checked {
            color: #165dff;
            text-decoration-line: underline;
            text-transform: none;
          }
        }
        .components-edit {
          cursor: pointer;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .edit-icon {
            font-size: 14px;
          }
          .word {
            margin-left: 5px;
            font-size: 14px;
          }
        }
      }
    }
    .warp {
      .card-list {
        .card-item {
          width: calc(20% - 40px);
          cursor: pointer;
          height: 70px;
          border-radius: 10px 10px 10px 10px;
          border: 1px solid #f2f3f5;
          margin: 10px 16px;
          display: flex;
          padding: 10px;
          .left-area {
            width: 50px;
            height: 50px;
            margin-right: 20px;
            border-radius: 10px 10px 10px 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            .icon {
              font-size: 30px;
              color: #fff;
            }
          }
          .right-area {
            flex: 1;
            .number {
              font-size: 24px;
              color: #333333;
              font-style: normal;
              text-transform: none;
            }
            .title {
              font-size: 14px;
              color: #888888;
            }
          }
        }
      }
    }
  }
</style>
